<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华彩</title>
    <script src="./cdn/tspartilcles.bundle.min.js"></script>
    <script type="module" src="./IconSvg/icon-svg.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            transition: background-color 0.3s, border-color 0.3s;
        }

        :root {
            /* 浅色主题变量 */
            --bg-color: #f5f7fa;
            --card-bg: #ffffff;
            --border-color: #e1e5eb;
            --text-color: #2d3748;
            --primary-color: #4c6ef5;
            --primary-hover: #3d5ce0;
            --secondary-color: #f1f3f9;
            --accent-color: #748ffc;
            --success-color: #51cf66;
            --warning-color: #ff922b;
            --danger-color: #ff6b6b;
            --scrollbar-thumb: #c1c9d2;
            --scrollbar-track: #edf2f7;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --hover-bg: rgba(116, 143, 252, 0.1);
            --active-bg: rgba(116, 143, 252, 0.15);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #1a202c;
                --card-bg: #2d3748;
                --border-color: #4a5568;
                --text-color: #e2e8f0;
                --primary-color: #5c7cfa;
                --primary-hover: #4c6ef5;
                --secondary-color: #4a5568;
                --accent-color: #748ffc;
                --success-color: #69db7c;
                --warning-color: #ffa94d;
                --danger-color: #ff8787;
                --scrollbar-thumb: #4a5568;
                --scrollbar-track: #2d3748;
                --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
                --hover-bg: rgba(92, 124, 250, 0.15);
                --active-bg: rgba(92, 124, 250, 0.25);
            }
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* 美化滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-color);
        }

    
        .container {
            display: flex;
            flex: 1;
            height: calc(100vh - 70px);
            padding: 20px;
            gap: 20px;
            overflow: hidden;
        }

        /* 左侧配置列表样式 */
        .config-list {
            width: 220px;
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: var(--shadow);
            padding: 16px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

        .list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 16px;
            margin-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }

        .list-header h2 {
            font-size: 1.25rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .theme-toggle {
            background: var(--secondary-color);
            border: none;
            border-radius: 6px;
            padding: 6px 12px;
            color: var(--text-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
        }

        .theme-toggle:hover {
            background: var(--primary-color);
            color: white;
        }

        .config-items {
            flex: 1;
            overflow-y: auto;
            padding-right: 4px;
        }

        .config-item {
            background: var(--secondary-color);
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 10px;
            cursor: pointer;
            border: 1px solid transparent;
            position: relative;
        }

        .config-item:hover {
            border-color: var(--primary-color);
            background: var(--hover-bg);
        }

        .config-item.active {
            border-color: var(--primary-color);
            background: var(--active-bg);
            box-shadow: 0 0 0 2px rgba(116, 143, 252, 0.2);
        }

        .config-name {
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .config-id {
            font-size: 0.75rem;
            opacity: 0.7;
            font-weight: normal;
            background: rgba(0,0,0,0.1);
            padding: 2px 6px;
            border-radius: 4px;
        }

        .btn-icon.add-config,
        .btn-icon.delete-config{
            display: none;
        }

        .config-item:hover .config-item-actions .btn-icon.add-config,
        .config-item:hover .config-item-actions .btn-icon.delete-config{
            display: flex;
        }

        .config-item-actions {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 5px;
        }

        .btn-icon {
            background: transparent;
            border: none;
            color: var(--text-color);
            opacity: 0.5;
            cursor: pointer;
            width: 24px;
            height: 24px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-icon:hover {
            opacity: 1;
            background: rgba(0,0,0,0.1);
        }

        .sub-items {
            margin-top: 10px;
            padding-left: 16px;
            border-left: 2px solid var(--border-color);
        }

        .sub-item {
            height: 40px;
            background: rgba(0,0,0,0.05);
            border-radius: 6px;
            padding: 8px 12px;
            margin-bottom: 8px;
            font-size: 0.9rem;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sub-item::before {
            content: "";
            position: absolute;
            left: -18px;
            top: 14px;
            width: 8px;
            height: 2px;
            background: var(--border-color);
        }

        .sub-item:hover {
            background: var(--hover-bg);
        }

        .sub-item:hover .btn-icon.delete-config{
            display: flex;
        }

        .sub-item.active {
            background: var(--active-bg);
            box-shadow: 0 0 0 1px var(--primary-color);
        }

        /* 右侧配置参数样式 */
        .config-params {
            flex: 1;
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: var(--shadow);
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            border: 1px solid var(--border-color);
            overflow: hidden;
        }

        .params-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-color);
        }

        .params-header h2 {
            font-size: 1.25rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #paramsContainer{
            height: calc(100% - 41px - 50px);
            padding-right: 10px;
            overflow-y: auto;
        }

        .param-group {
            background: var(--secondary-color);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 15px;
        }

        .param-group-title {
            font-weight: 600;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .param-row {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }

        .param-label {
            width: 80px;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .param-controls {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .param-slider {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: var(--card-bg);
            outline: none;
            -webkit-appearance: none;
        }

        .param-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
            transition: all 0.2s;
        }

        .param-slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

        .param-input {
            width: 80px;
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            color: var(--text-color);
        }

        .param-input-w150{
            width: 150px;
        }

        .param-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(116, 143, 252, 0.2);
        }

        .color-preview {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
        }

        .color-inputs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .color-input {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .color-input input[type="color"] {
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background: transparent;
        }

        .color-input input[type="text"] {
            width: 80px;
            padding: 6px 8px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            color: var(--text-color);
        }

        .btn {
            padding: 8px 16px;
            border-radius: 8px;
            border: none;
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 0.85rem;
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
        }

        .btn-success {
            background: var(--success-color);
            color: white;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
        }

        .btn-outline:hover {
            background: var(--secondary-color);
        }

        .btn-danger {
            background: var(--danger-color);
            color: white;
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            color: var(--text-color);
            opacity: 0.6;
        }

        .empty-state i {
            font-size: 3rem;
            margin-bottom: 16px;
        }

        .empty-state p {
            max-width: 300px;
        }

        .actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
            margin-top: auto;
        }

        .add-config-btn {
            background: var(--success-color);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 10px 16px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            width: 100%;
            justify-content: center;
        }

        .add-config-btn:hover {
            background: #40c057;
        }

        /* 动画效果 */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        .empty-state-icon{
            font-size: 80px;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- 左侧配置列表 -->
        <div class="config-list">
            <div class="list-header">
                <h2><icon-svg name="fa-list"></icon-svg> 预设配置</h2>
            </div>
            <div class="config-items" id="configItems">
                <!-- 配置项会通过JS动态生成 -->
            </div>
            <button class="add-config-btn" id="addConfigBtn">
                <icon-svg name="fa-plus"></icon-svg> 添加新配置
            </button>
        </div>

        <!-- 右侧配置参数 -->
        <div class="config-params">
            <div class="params-header">
                <h2 id="selectedConfigName"><icon-svg name="fa-sliders"></icon-svg> 配置参数</h2>
            </div>
            
            <div id="paramsContainer">
                <div class="empty-state">
                    <icon-svg name="fa-cog" class="empty-state-icon"></icon-svg>
                    <h3>选择配置项</h3>
                    <p>从左侧列表中选择一个配置项开始编辑其参数</p>
                </div>
            </div>
            
            <div class="actions">
                <button class="btn btn-success" id="previewBtn">
                    <icon-svg name="fa-eye"></icon-svg> 预览
                </button>
                <button class="btn btn-primary" id="saveBtn">
                    <icon-svg name="fa-save"></icon-svg> 保存配置
                </button>
            </div>
        </div>
    </div>

    <script type="module">
        import { nanoid } from './cdn/nanoid.js';
        // 默认配置数据
        const defaultConfigurations = utools.dbStorage.getItem('confetti_configs') || [
            {
                id: 'defaultyanhua',
                name: '礼花',
                data: [
                    {
                        shape: '',
                        particleCount: 150,
                        spread: 45,
                        angle: 60,
                        scalar: 1.5,
                        startVelocity: 40,
                        origin: { x: 0, y: 0.5},
                        gravity: 1,
                        decay: 0.94,
                        ticks: 100,
                        colors: []
                    },
                    {
                        shape: '',
                        particleCount: 150,
                        spread: 45,
                        angle: 120,
                        scalar: 1.5,
                        startVelocity: 40,
                        origin: { x: 1, y: 0.5},
                        gravity: 1,
                        decay: 0.94,
                        ticks: 100,
                        colors: []
                    }
                ]
            },
            {
                id: 'defaultsahua',
                name: '星光',
                data:  {
                    shape: 'star',
                    particleCount: 150,
                    spread: 360,
                    angle: 90,
                    scalar: 1.2,
                    startVelocity: 30,
                    origin: { x: 0.5, y: 0.5},
                    gravity: 0,
                    decay: 0.94,
                    ticks: 50,
                    colors: ["FFE400", "FFBD00", "E89400", "FFCA6C", "FDFFB8"]
                }
            },
            {
                id: 'defaultxinxing',
                name: '心形',
                data: {
                    shape: 'heart',
                    particleCount: 150,
                    spread: 180,
                    angle: 90,
                    scalar: 3,
                    startVelocity: 25,
                    origin: { x: 0.5, y: 0.2},
                    gravity: 1,
                    decay: 0.94,
                    ticks: 100,
                    colors: ["FFC0CB", "FF69B4", "FF1493", "C71585"],
                }
            },
            {
                id: 'defaultemoji',
                name: 'emoji',
                data: [
                    {
                        shape: 'emoji',
                        particleCount: 100,
                        spread: 360,
                        angle: 90,
                        scalar: 2,
                        ticks: 100,
                        gravity: 0,
                        decay: 0.94,
                        startVelocity: 20,
                        origin: { x: 0.5, y: 0.2},
                        emoji: '😍😘🥰',
                        colors: []
                    },
                    {
                        shapes: 'circle',
                        particleCount: 50,
                        spread: 360,
                        angle: 90,
                        scalar: 1.2,
                        ticks: 100,
                        gravity: 0,
                        decay: 0.94,
                        startVelocity: 30,
                        origin: { x: 0.5, y: 0.2},
                        colors: ["a864fd", "29cdff", "78ff44", "ff718d", "fdff6a"]
                    },
                    {
                        shapes: 'square',
                        particleCount: 50,
                        spread: 360,
                        angle: 90,
                        scalar: 1.2,
                        ticks: 100,
                        gravity: 0,
                        decay: 0.94,
                        startVelocity: 30,
                        origin: { x: 0.5, y: 0.2},
                        colors: ["a864fd", "29cdff", "78ff44", "ff718d", "fdff6a"]
                    }
                ]
            }
        ];

        // 当前选中的配置
        let currentConfig = null;
        let currentSubIndex = -1; // -1 表示选中整个配置，否则为子项索引
        let configurations = [...defaultConfigurations];
        let editingNewConfig = false;

        let templateConfig = {
            shape: '',
            particleCount: 100,
            spread: 60,
            angle: 90,
            scalar: 2,
            decay: 1,
            gravity: 0.5,
            startVelocity: 30,
            origin: { x: 0.5, y: 0.5 },
            ticks: 100,
            colors: []
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            renderConfigList();
            setupEventListeners();
            saveConfig();
        });
        
        // 设置事件监听器
        function setupEventListeners() {
            document.getElementById('addConfigBtn').addEventListener('click', addNewConfig);
            document.getElementById('previewBtn').addEventListener('click', previewCurrentConfig);
            document.getElementById('saveBtn').addEventListener('click', saveCurrentConfig);
        }

        // uTools 数据保存即动态指令
        const saveConfig = () => {
            utools.dbStorage.setItem('confetti_configs', configurations)
            let cmds = configurations.map(item => {
                return item.name
            })
            console.log(cmds);
            utools.setFeature({
                code: "Dynamic",
                explain: "命令",
                mainHide: true,
                cmds: cmds,
            });
        }
        
        // 渲染配置列表
        function renderConfigList() {
            const container = document.getElementById('configItems');
            container.innerHTML = '';
            
            configurations.forEach((config, index) => {
                const item = document.createElement('div');
                item.className = 'config-item fade-in';
                item.dataset.index = index;
                
                item.innerHTML = `
                    <div class="config-name">
                        <span>${config.name}</span>
                    </div>
                    <div class="config-item-actions">
                        <button class="btn-icon delete-config" title="删除配置">
                            <icon-svg name="fa-trash"></icon-svg>
                        </button>
                        <button class="btn-icon add-config" title="添加配置">
                            <icon-svg name="fa-plus"></icon-svg>
                        </button>
                    </div>
                `;
                
                // 如果data是数组，添加子项
                if (Array.isArray(config.data)) {
                    const subItems = document.createElement('div');
                    subItems.className = 'sub-items';
                    
                    config.data.forEach((subItem, subIndex) => {
                        const subItemEl = document.createElement('div');
                        subItemEl.className = 'sub-item';
                        subItemEl.textContent = `${config.name} ${subIndex + 1}`;
                        subItemEl.dataset.index = index;
                        subItemEl.dataset.subIndex = subIndex;


                        const subItemDeteleEl = document.createElement('button')
                        subItemDeteleEl.className = 'btn-icon delete-config'
                        subItemDeteleEl.innerHTML = '<icon-svg name="fa-trash"></icon-svg>'
                        subItemDeteleEl.addEventListener('click', (e) => {
                            e.stopPropagation();
                            deleteConfig(index, subIndex);
                        })

                        
                        subItemEl.addEventListener('click', (e) => {
                            e.stopPropagation();
                            selectConfigItem(index, subIndex);
                        });
                        
                        subItems.appendChild(subItemEl);
                        subItemEl.appendChild(subItemDeteleEl)
                    });
                    
                    item.appendChild(subItems);
                }
                
                item.addEventListener('click', () => {
                    selectConfigItem(index);
                });
                
                // 添加删除和复制事件
                item.querySelector('.delete-config').addEventListener('click', (e) => {
                    e.stopPropagation();
                    deleteConfig(index);
                });
                
                item.querySelector('.add-config').addEventListener('click', (e) => {
                    e.stopPropagation();
                    addSubConfig(index);
                });
                
                container.appendChild(item);
            });
        }
        
        // 选择配置项
        function selectConfigItem(index, subIndex = -1) {
            currentConfig = configurations[index];
            currentSubIndex = subIndex;
            editingNewConfig = false;
            
            // 更新左侧选中状态
            document.querySelectorAll('.config-item, .sub-item').forEach(el => {
                el.classList.remove('active');
            });
            
            if (subIndex === -1) {
                document.querySelector(`.config-item[data-index="${index}"]`).classList.add('active');
            } else {
                document.querySelector(`.sub-item[data-index="${index}"][data-sub-index="${subIndex}"]`).classList.add('active');
            }
            
            // 更新右侧参数区域
            // if(Array.isArray(currentConfig.data) && (subIndex === -1 || subIndex === undefined))currentConfig = null; 
            renderConfigParams();
        }
        
        // 渲染配置参数
        function renderConfigParams() {
            const container = document.getElementById('paramsContainer');
            const nameEl = document.getElementById('selectedConfigName');
            
            if (!currentConfig || (Array.isArray(currentConfig.data) && currentSubIndex === -1)) {
                container.innerHTML = `
                    <div class="empty-state">
                        <icon-svg name="fa-cog" class="empty-state-icon"></icon-svg>
                        <h3>选择配置项</h3>
                        <p>从左侧列表中选择一个配置项开始编辑其参数</p>
                    </div>
                `;
                nameEl.innerHTML = '<i class="fas fa-sliders-h"></i> 配置参数';
                return;
            }
            
            const configData = currentSubIndex === -1 ? 
                currentConfig.data : 
                currentConfig.data[currentSubIndex];
            
            nameEl.innerHTML = currentSubIndex === -1 ? 
                `<i class="fas fa-sliders-h"></i> ${currentConfig.name}` : 
                `<i class="fas fa-sliders-h"></i> ${currentConfig.name} ${currentSubIndex + 1}`;
            
            // 生成参数编辑UI
            container.innerHTML = `
                <div class="param-group fade-in">
                    <div class="param-group-title"><icon-svg name="fa-cog"></icon-svg> 基本配置</div>
                    <div class="param-row">
                        <label class="param-label">配置名称</label>
                        <input type="text" class="param-input param-input-w150" id="configName" value="${currentConfig.name}" placeholder="输入配置名称">
                    </div>
                </div>

                <div class="param-group fade-in">
                    <div class="param-group-title"><icon-svg name="fa-shapes"></icon-svg> 形状</div>
                    <div class="param-row">
                        <label class="param-label">纸屑形状</label>
                        <select class="param-input param-input-w150" id="shapeSelect">
                            <option value="" ${configData.shape === '' ? 'selected' : ''}>无</option>
                            <option value="emoji" ${configData.shape === 'emoji' ? 'selected' : ''}>emoji</option>
                            <option value="heart" ${configData.shape === 'heart' ? 'selected' : ''}>心形</option>
                            <option value="star" ${configData.shape === 'star' ? 'selected' : ''}>星星</option>
                            <option value="circle" ${configData.shape === 'circle' ? 'selected' : ''}>圆形</option>
                            <option value="square" ${configData.shape === 'square' ? 'selected' : ''}>方形</option>
                            <option value="spade" ${configData.shape === 'spade' ? 'selected' : ''}>黑桃</option>
                            <option value="diamond" ${configData.shape === 'diamond' ? 'selected' : ''}>菱形</option>
                            <option value="club" ${configData.shape === 'club' ? 'selected' : ''}>梅花</option>
                            <option value="polygon" ${configData.shape === 'polygon' ? 'selected' : ''}>多边形</option>
                            <option value="triangle" ${configData.shape === 'triangle' ? 'selected' : ''}>三角形</option>
                        </select>
                    </div>
                    <div class="param-row emoji-row">
                        <label class="param-label">emoji</label>
                        <input type="text" class="param-input param-input-w150" placeholder="输入emoji" id="emojiInput" value="${configData?.emoji || ''}">
                    </div>
                </div>

                <div class="param-group fade-in">
                    <div class="param-group-title"><icon-svg name="fa-palette"></icon-svg> 纸屑颜色</div>
                    <div class="color-inputs" id="colorInputs">
                        ${configData?.colors.map((color, i) => `
                            <div class="color-input">
                                <input type="color" value="#${color}" data-index="${i}">
                                <input type="text" value="${color}" data-index="${i}">
                                <button class="btn btn-sm btn-danger remove-color" data-index="${i}">
                                    <icon-svg name="fa-xmark"></icon-svg>
                                </button>
                            </div>
                        `).join('')}
                    </div>
                    <button class="btn btn-sm btn-outline" id="addColorBtn">
                        <icon-svg name="fa-plus"></icon-svg> 添加颜色
                    </button>
                </div>
                
                <div class="param-group fade-in">
                    <div class="param-group-title"><icon-svg name="confetti"></icon-svg> 纸屑效果</div>
                    <div class="param-row">
                        <label class="param-label">纸屑数量</label>
                        <div class="param-controls">
                            <input type="range" class="param-slider" id="particleCountSlider" min="10" max="500" value="${configData.particleCount}">
                            <input type="number" class="param-input" id="particleCountInput" min="10" max="500" value="${configData.particleCount}">
                        </div>
                    </div>
                    <div class="param-row">
                        <label class="param-label">扩散角度</label>
                        <div class="param-controls">
                            <input type="range" class="param-slider" id="spreadSlider" min="0" max="360" value="${configData.spread}">
                            <input type="number" class="param-input" id="spreadInput" min="0" max="360" value="${configData.spread}">
                        </div>
                    </div>
                    <div class="param-row">
                        <label class="param-label">发射角度</label>
                        <div class="param-controls">
                            <input type="range" class="param-slider" id="angleSlider" min="0" max="360" value="${configData.angle}">
                            <input type="number" class="param-input" id="angleInput" min="0" max="360" value="${configData.angle}">
                        </div>
                    </div>
                    <div class="param-row">
                        <label class="param-label">缩放比例</label>
                        <div class="param-controls">
                            <input type="range" class="param-slider" id="scalarSlider" min="0.1" max="10" step="0.1" value="${configData.scalar}">
                            <input type="number" class="param-input" id="scalarInput" min="0.1" max="10" step="0.1" value="${configData.scalar}">
                        </div>
                    </div>
                    <div class="param-row">
                        <label class="param-label">初始速度</label>
                        <div class="param-controls">
                            <input type="range" class="param-slider" id="velocitySlider" min="1" max="100" value="${configData.startVelocity}">
                            <input type="number" class="param-input" id="velocityInput" min="1" max="100" value="${configData.startVelocity}">
                        </div>
                    </div>
                    <div class="param-row">
                        <label class="param-label">重力</label>
                        <div class="param-controls">
                            <input type="range" class="param-slider" id="gravitySlider" min="0" max="5" step="0.1" value="${configData.gravity}">
                            <input type="number" class="param-input" id="gravityInput" min="0" max="5" step="0.1" value="${configData.gravity}">
                        </div>
                    </div>
                    <div class="param-row">
                        <label class="param-label">衰减时间</label>
                        <div class="param-controls">
                            <input type="range" class="param-slider" id="decaySlider" min="0.1" max="1" step="0.01" value="${configData.decay}">
                            <input type="number" class="param-input" id="decayInput" min="0.1" max="1" step="0.01" value="${configData.decay}">
                        </div>
                    </div>
                    <div class="param-row">
                        <label class="param-label">持续时间</label>
                        <div class="param-controls">
                            <input type="range" title="越小时间越长" class="param-slider" id="ticksSlider" min="10" max="300" value="${configData.ticks}">
                            <input type="number" class="param-input" id="ticksInput" min="10" max="300" value="${configData.ticks}">
                        </div>
                    </div>
                </div>
                
                <div class="param-group fade-in">
                    <div class="param-group-title"><icon-svg name="fa-bullseye"></icon-svg> 原点位置</div>
                    <div class="param-row">
                        <label class="param-label">X 坐标</label>
                        <div class="param-controls">
                            <input type="range" class="param-slider" id="originXSlider" min="0" max="1" step="0.1" value="${configData.origin.x}">
                            <input type="number" class="param-input" id="originXInput" min="0" max="1" step="0.1" value="${configData.origin.x}">
                        </div>
                    </div>
                    <div class="param-row">
                        <label class="param-label">Y 坐标</label>
                        <div class="param-controls">
                            <input type="range" class="param-slider" id="originYSlider" min="0" max="1" step="0.1" value="${configData.origin.y}">
                            <input type="number" class="param-input" id="originYInput" min="0" max="1" step="0.1" value="${configData.origin.y}">
                        </div>
                    </div>
                </div>
            `;

            // 如果是 emoji 显示输入框
            const shapeSelect = document.getElementById('shapeSelect');
            let emojiRow = document.querySelector('.emoji-row')
            const isEmojiShow = (value) => {
                if(value === 'emoji'){
                    emojiRow.style.display = 'flex';
                }else{
                    emojiRow.style.display = 'none';
                }
            }

            shapeSelect.onchange = (e) => isEmojiShow(e.target.value)
            isEmojiShow(shapeSelect.value)
            // 添加颜色事件
            document.getElementById('addColorBtn').addEventListener('click', () => {
                const colorInputs = document.getElementById('colorInputs');
                const newIndex = colorInputs.children.length;
                
                const colorInput = document.createElement('div');
                colorInput.className = 'color-input';
                colorInput.innerHTML = `
                    <input type="color" value="#FFC0CB" data-index="${newIndex}">
                    <input type="text" value="FFC0CB" data-index="${newIndex}">
                    <button class="btn btn-sm btn-danger remove-color" data-index="${newIndex}">
                        <icon-svg name="fa-xmark"></icon-svg>
                    </button>
                `;
                
                colorInputs.appendChild(colorInput);

                colorInput.querySelector('input[type="color"]').addEventListener('change', (e) => {
                    colorInput.querySelector('input[type="text"]').value = e.target.value.replace('#', '')
                })

                colorInput.querySelector('input[type="text"]').addEventListener('change', (e) => {
                    e.target.value = e.target.value.replace('#', '')
                    colorInput.querySelector('input[type="color"]').value = '#' + e.target.value
                })
                
                // 绑定删除事件
                colorInput.querySelector('.remove-color').addEventListener('click', function() {
                    this.parentElement.remove();
                });
            });
            
            // 绑定颜色删除事件
            document.querySelectorAll('.remove-color').forEach(btn => {
                btn.addEventListener('click', function() {
                    this.parentElement.remove();
                });
            });
            
            // 绑定滑块和输入框事件
            setupSliderEvents();
        }
        
        // 设置滑块和输入框的同步事件
        function setupSliderEvents() {
            // 粒子数量
            const particleCountSlider = document.getElementById('particleCountSlider');
            const particleCountInput = document.getElementById('particleCountInput');
            bindSliderInput(particleCountSlider, particleCountInput);
            
            // 扩散角度
            const spreadSlider = document.getElementById('spreadSlider');
            const spreadInput = document.getElementById('spreadInput');
            bindSliderInput(spreadSlider, spreadInput);
            
            // 发射角度
            const angleSlider = document.getElementById('angleSlider');
            const angleInput = document.getElementById('angleInput');
            bindSliderInput(angleSlider, angleInput);
            
            // 缩放比例
            const scalarSlider = document.getElementById('scalarSlider');
            const scalarInput = document.getElementById('scalarInput');
            bindSliderInput(scalarSlider, scalarInput);
            
            // 初始速度
            const velocitySlider = document.getElementById('velocitySlider');
            const velocityInput = document.getElementById('velocityInput');
            bindSliderInput(velocitySlider, velocityInput);

            // 重力
            const gravitySlider = document.getElementById('gravitySlider');
            const gravityInput = document.getElementById('gravityInput');
            bindSliderInput(gravitySlider, gravityInput);

            // 衰减时间
            const decaySlider = document.getElementById('decaySlider');
            const decayInput = document.getElementById('decayInput');
            bindSliderInput(decaySlider, decayInput);
            
            // 持续时间
            const ticksSlider = document.getElementById('ticksSlider');
            const ticksInput = document.getElementById('ticksInput');
            bindSliderInput(ticksSlider, ticksInput);
            
            // X坐标
            const originXSlider = document.getElementById('originXSlider');
            const originXInput = document.getElementById('originXInput');
            bindSliderInput(originXSlider, originXInput);
            
            // Y坐标
            const originYSlider = document.getElementById('originYSlider');
            const originYInput = document.getElementById('originYInput');
            bindSliderInput(originYSlider, originYInput);
        }
        
        // 绑定滑块和输入框的同步
        function bindSliderInput(slider, input) {
            slider.addEventListener('input', () => {
                input.value = slider.value;
            });
            
            input.addEventListener('input', () => {
                slider.value = input.value;
            });
        }
        
        // 添加新配置
        function addNewConfig() {
            const newConfig = {
                id: nanoid(),
                name: '新配置' + (configurations.length + 1),
                data: templateConfig
            };
            
            configurations.push(newConfig);

            saveConfig()

            renderConfigList();
            
            // 选中新配置
            const lastIndex = configurations.length - 1;
            selectConfigItem(lastIndex);
            editingNewConfig = true;
        }

        // 添加子配置
        function addSubConfig(index) {
            const original = configurations[index];

            if(Array.isArray(original.data)){
                original.data.push(templateConfig)
            }else{
                original.data = [ original.data, templateConfig ]
            }

            renderConfigList();
        }
        
        // 删除配置
        function deleteConfig(index, subIndex) {
            if (confirm('确定要删除此配置吗？')) {
                if(subIndex === -1 || subIndex === undefined){
                    configurations.splice(index, 1);
                }else{
                    configurations[index].data.splice(subIndex, 1);
                    if(configurations[index].data.length === 1){
                        configurations[index].data = configurations[index].data[0]
                    }
                }
                saveConfig()

                renderConfigList();
                
                // 如果删除的是当前选中的配置，清除右侧面板
                if (currentConfig && configurations.indexOf(currentConfig) === -1) {
                    currentConfig = null;
                    renderConfigParams();
                }
            }
        }

        const updateConfig = () => {
            if (!currentConfig) return;
            if (currentConfig && (Array.isArray(currentConfig.data) && currentSubIndex === -1))return currentConfig.data;
            let configData = {}
            // 更新配置名称和ID
            // currentConfig.name = document.getElementById('configName').value;
            
            // 获取配置数据
            // const configData = (currentSubIndex === -1 || currentSubIndex === undefined) ? 
            //     currentConfig.data : 
            //     currentConfig.data[currentSubIndex];
                

            // 更新形状数据
            configData.shape = document.getElementById('shapeSelect').value
            if(configData.shape === 'emoji'){
                configData.emoji = document.getElementById('emojiInput').value
            }else{
                delete configData.emoji
            }

            // 更新颜色数据
            const colorInputs = document.querySelectorAll('#colorInputs .color-input');
            configData.colors = [];
            
            colorInputs.forEach(input => {
                const colorText = input.querySelector('input[type="text"]').value;
                if (colorText) {
                    configData.colors.push(colorText.replace('#', ''));
                }
            });
            
            // 更新基本参数
            configData.particleCount = parseInt(document.getElementById('particleCountInput').value);
            configData.spread = parseInt(document.getElementById('spreadInput').value);
            configData.angle = parseInt(document.getElementById('angleInput').value);
            configData.scalar = parseFloat(document.getElementById('scalarInput').value);
            configData.startVelocity = parseInt(document.getElementById('velocityInput').value);
            configData.gravity = parseFloat(document.getElementById('gravityInput').value);
            configData.decay = parseFloat(document.getElementById('decayInput').value);
            configData.ticks = parseInt(document.getElementById('ticksInput').value);
            
            // 更新原点位置
            configData.origin = {
                x: parseFloat(document.getElementById('originXInput').value),
                y: parseFloat(document.getElementById('originYInput').value)
            };


            return configData
            
        }

        let mapParam = (param) => {
            if(Array.isArray(param)){
                return param.map(item => {
                    let obj = {
                        ...item,
                        shapes: [ item.shape ],
                        shapeOptions: {
                            emoji: {
                                value: item.emoji ? [...item.emoji] : [],
                            },
                        }, 
                    }
                    if(item?.colors && !item.colors.length){
                        delete obj.colors
                    }
                    if(item.shape){
                        delete obj.shape
                    }else{
                        delete obj.shapes
                        delete obj.shape
                    }
                    if(item.emoji){
                        delete obj.emoji
                    }else{
                        delete obj.shapeOptions
                        delete obj.emoji
                    }
                    return obj
                })
            }else{
                let obj = {
                    ...param,
                    shapes: [ param.shape ],
                    shapeOptions: {
                        emoji: {
                            value: param.emoji ? [...param.emoji] : [],
                        },
                    }, 
                }
                if(param?.colors && !param.colors.length){
                    delete obj.colors
                }
                if(param.shape){
                    delete obj.shape
                }else{
                    delete obj.shapes
                    delete obj.shape
                }
                if(param.emoji){
                    delete obj.emoji
                }else{
                    delete obj.shapeOptions
                }
                return obj
            }
        }

        function previewCurrentConfig(){
            let param = updateConfig();
            if(Array.isArray(param)){
                param = mapParam(param)
                console.log(mapParam(param));
                
                param.forEach(item => {
                    confetti(item)
                })
            }else{
                confetti(mapParam(param))
                console.log(mapParam(param));
            }
        }
        
        // 保存当前配置
        function saveCurrentConfig() {
            if(!currentConfig)return;
            if (currentConfig && (Array.isArray(currentConfig.data) && currentSubIndex === -1))return;
            let param = updateConfig();

            currentConfig.name = document.getElementById('configName').value;
            
            // 获取配置数据
            if(currentSubIndex === -1 || currentSubIndex === undefined){
                currentConfig.data = param   
            }else{
                currentConfig.data[currentSubIndex] = param
            }

            saveConfig()

            // 更新左侧列表
            renderConfigList();
            
            // 重新渲染参数面板以显示最新数据
            renderConfigParams();
            
        }
        
    </script>
</body>
</html>